<template>
    <a-layout-sider class="sidebar" v-model:collapsed="collapsed"
                    collapsible
                    :trigger="null" width="200">
        <div class="logo_img" :style="{width:(collapsed?'80px':'268px'),paddingLeft:(collapsed?'10px':'30px')}">
<!--            <img class="img" src="@/assets/img/logo.png" alt="">-->
            <span class="title" style="font-size: 20px; font-weight: bold; color: #fff; float: left; display: block; margin-top: 10px; margin-bottom: 15px" v-if="!collapsed">在线订餐系统</span>
        </div>
        <a-menu @click="clickMenuItem"
                :defaultSelectedKeys="[$route.path]"
                mode="inline"
                theme="dark"
                v-model:selectedKeys="selectedKeys"
                @openChange="onOpenChange"
                v-model:openKeys="openKeys"
                :style="{paddingLeft:'6px' }">
            <template v-for="item in menus">
                <a-menu-item v-if="item.childrenMenus.length === 0" :key="item.url">{{item.name}}</a-menu-item>
                <!-- 否则视为子菜单，传入菜单信息并且运用下面定义的函数式组件 -->
                    <a-sub-menu v-else  :title="item.name" :key="item.id">
                        <a-menu-item v-for="item2 in item.childrenMenus" :key="item2.url">{{item2.name}}</a-menu-item>
                    </a-sub-menu>
            </template>
        </a-menu>
    </a-layout-sider>
</template>

<script>
import {defineComponent, toRefs, onMounted} from "vue";
import { reactive } from "vue";
import { useRouter, useRoute } from 'vue-router'


export default defineComponent({
    name: "sidebar",
    setup() {
        const router = useRouter()
        const route = useRoute()
        console.log('当前路由为',route.path)
        const state = reactive({
            collapsed: false,
            menus: JSON.parse(window.localStorage.getItem('meuns')),
            selectedKeys: ['/user/shop'],
            openKeys: [34],
            defaultSelectedKeys: [route.path]
        })

        const clickMenuItem = (item) => {
            console.log(22222, item)
            router.push(item.key)
        }

        //
        const onOpenChange = (openKeys) => {
            console.log('key', openKeys)
            // window.sessionStorage.setItem('openKeys', JSON.stringify(openKeys))

            // 控制只打开一个
            // const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1)
            const data = openKeys.pop()
            state.openKeys = [data]
        }

        onMounted(() => {
            // const openKeys = window.sessionStorage.getItem('openKeys')
            // if (openKeys) {
            //     console.log(132132132132)
            //     // 存在即赋值
            //     state.openKeys = JSON.parse(openKeys)
            // }
        })
        return{
            ...toRefs(state),
            clickMenuItem,
            onOpenChange
        }
    }
})
</script>

<style lang="less" scoped>
::v-deep .ant-layout-sider-children{
    background: #000c17;
}
::v-deep .ant-menu.ant-menu-dark, .ant-menu-dark .ant-menu-sub, .ant-menu.ant-menu-dark .ant-menu-sub{
    background: #000c17;
}
</style>